import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-table-drag-table2',
  // templateUrl: './drag-table2.component.html',
  template: `
    <nz-card>
      <div style="width:800px;margin:0 auto;">
        <nz-table #columnTable [nzData]="listOfData" [nzScroll]="{ x: '1100px' }">
          <thead>
            <tr>
              <th nzLeft [nzWidth]="greatTableDragCfg.nameWidth" [greatTableColumnDrag]="greatTableDragCfg" columnName="nameWidth">
                Full Name
              </th>
              <th nzWidth="200px">Age</th>
              <th nzWidth="200px">Column 1</th>
              <th nzWidth="200px">Column 2</th>
              <th nzWidth="200px">Column 3</th>
              <th nzWidth="200px">Column 4</th>
              <th nzWidth="200px">Column 5</th>
              <th nzWidth="200px">Column 6</th>
              <th nzWidth="100px" nzRight>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of columnTable.data">
              <td nzLeft>{{ data.name }}</td>
              <td>{{ data.age }}</td>
              <td>{{ data.address }}</td>
              <td>{{ data.address }}</td>
              <td>{{ data.address }}</td>
              <td>{{ data.address }}</td>
              <td>{{ data.address }}</td>
              <td>{{ data.address }}</td>
              <td nzRight>
                <a>action</a>
              </td>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </nz-card>
  `,
})
export class TableDragTable2Component implements OnInit {
  greatTableDragCfg = {
    x: '700px',
    nameWidth: '200px',
  };

  listOfData = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London',
    },
  ];

  ngOnInit(): void {}
}
